<template>
  <div class="navBar">
     <!-- 固定头部导航栏 -->
      <el-header class="header">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          background-color="#E6A23C"
          text-color="#fffaf0"
          router
        >
          <el-menu-item v-for="item in lists" :key="item.desc" :class="item.class" :index="item.index">
            <i :class="item.i_class"></i>
            {{ item.des }}
          </el-menu-item>
        </el-menu>
      </el-header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/",
    };
  },
  props: {
    isAdmin:Number
  },
  computed: {
    //页面头部渲染列表
    lists: function() {
      if (this.isAdmin=="0") {
        // 管理员页面
        return [
          {
            index: "/admin/orderManagement",
            class: "item",
            i_class: "el-icon-document",
            des: "订单管理"
          }, 
          {
            index: "/admin/shoesManagement",
            class: "item",
            i_class: "el-icon-reading",
            des: "鞋品管理"
          },
          {
            index: "/admin/userManagement",
            class: "item",
            i_class: "el-icon-user",
            des: "用户管理"
          }
        ];
      } else if (this.isAdmin=="1") {
        // 用户页面
        return [
          {
            index: "/user/merchantRegister",
            class: "item",
            i_class: "el-icon-s-home",
            des: "商家入驻"
          },
          {
            index: "/user/collect",
            class: "item",
            i_class: "el-icon-star-on",
            des: "我的收藏"
          },
          {
            index: "/user/order",
            class: "item",
            i_class: "el-icon-s-order",
            des: "我的订单"
          },
          {
            index: "/user/shopCart",
            class: "item",
            i_class: "el-icon-shopping-cart-full",
            des: "我的购物车"
          }
        ];
      }else if (this.isAdmin=="2") {
        // 商家页面
        return [
          {
            index: "/user/shoesManagement",
            class: "item",
            i_class: "el-icon-reading",
            des: "鞋品管理"
          },
          {
            index: "/user/collect",
            class: "item",
            i_class: "el-icon-star-on",
            des: "我的收藏"
          },
          {
            index: "/user/shoesOrder",
            class: "item",
            i_class: "el-icon-s-order",
            des: "我的订单"
          },
          {
            index: "/user/shopCart",
            class: "item",
            i_class: "el-icon-shopping-cart-full",
            des: "我的购物车"
          }
        ];
      }
    }
  },
  created() {
    if (!localStorage.getItem("user") && !localStorage.getItem("adminUser")) {
      for(var i=0; i<this.lists.length; i++) {
        this.lists[i].index = '/login';
      }
    }
  }
};
</script>

<style scoped>
.navBar .header {
  padding: 0px;
}
.item {
  float: right !important;
}
.navBar .el-menu-item i {
  color: #fffaf0;
}
.header .el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid #ffffff;
}
</style>
